<template>
	<div class="hcj_input" >
		<input type="text" class="hcj_input_inner"
		:class="{'hcj-disabled':disabled}"
		:placeholder="placeholder"
		:type="showPassword ? (showPasswordVisible ? 'text':'password'): type"
		:name="name"
		:disabled="disabled"
		:value="value"
		@input="handleInput"
		>
		<span v-if="clearInput || showPassword" class="hcj-input_suffix">
			<span 
			v-if="clearInput && value"
			@click.self="clearValue"
			>-</span>
			<span 
			v-if="showPassword && value"
			@click.self="showPas"
			>○</span>
		</span>
	</div>
</template>

<script>
	export default {
		name: 'hcj-button',
		props: {
			placeholder: {
				type: String,
				default: ''
			},
			type: {
				type: String,
				default: 'text'
			},
			name: {
				type: String,
				default: ''
			},
			disabled: {
				type: Boolean,
				default: false
			},
			value: null,
			clearInput: {
				type: Boolean,
				default: false
			},
			showPassword: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				showPasswordVisible: false
			}
		},
		methods: {
			handleInput(e) {
				this.$emit('input',e.target.value)
			},
			clearValue() {
				this.$emit('input','')
			},
			showPas() {
				this.showPasswordVisible = !this.showPasswordVisible
			}
 		}
	}
</script>

<style>
	.hcj_input {
		width: 100%;
		position: relative;
		font-size: 14px;
		display: inline-block;
	}
	.hcj_input_inner {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-image: none;
		border-radius: 4px;
		border: 1px solid darkgray;
		box-sizing: border-box;
		color: kgray;
		display: inline-block;
		font-size: inherit;
		height: 40px;
		line-height: 40px;
		outline: none;
		padding: 0 15px;
		transition: all .3s;
		width: 100%;
	}
	.hcj_input_inner:focus {
		outline: none;
		border-color: #2980b9;
	}
	
	/* 禁用 */
	.hcj-disabled {
		background-color: lightgray;
		cursor: not-allowed;
	}
	
	/* 操作图标 */
	.hcj-input_suffix {
		position: absolute;
		height: 100%;
		right: 10px;
		line-height: 40px;
		text-align: center;
		top: 0;
		cursor: pointer;
		/* background-color: red; */
		font-size: 25px;
	}
</style>